<template>
  <div style="background: rgba(69, 69, 146, 0.06);min-height: 100vh;">
    <div class="dayNextClass">
      <div class="CalendarShow">
        <div class="dateTime">{{ cal_label }}</div>
        <div style="display:flex;margin-right:5px;z-index: 6;align-items: center;" @click="MonthReduction">
          <img :src="left_icon"
               style="width: 24px;height: 24px;padding-top: 2px;">
        </div>
        <div style="display:flex;z-index: 6;align-items: center;" @click="AddMonth()">
          <img :src="right_icon"
               style="width: 24px;height: 24px;padding-top: 2px;">
        </div>
      </div>
      <div class="CombinedClass">
        <img :src="Combined" class="CombinedImage"/>
        {{ email }}
      </div>
    </div>
    <van-tabs v-model="activeName" line-width="33.3%" color="#454592" title-active-color="#454592"
              background="none"
              title-inactive-color="#333333"
              line-height="2px">
      <van-tab title="目标客户" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;" name="1">
        <div style="display: flex;justify-content: center;width: 100%;margin-top: 15px;" v-if="type=='INS'">
          <div class="condition">
            <div v-for="(item, index) in targetProductList" :key="index"
                 :class="target_condition_selected==index?'condition_check':'condition_uncheck'"
                 :style="item.select?'color: #454592;background: rgba(69, 69, 146, 0.1);':'',targetProductList.length==1?'border-radius:30px;':(index==targetProductList.length-1?('border-top-right-radius:30px;border-bottom-right-radius:30px;'):(index==0?'border-top-left-radius:30px;border-bottom-left-radius:30px;':''))"
                 style="width:50%;height:100%;"
                 @click="targetConditionChange(index)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div style="width: 100%;margin-top:20px;display: flex;justify-content: center;">
          <div style="width: 95%;font-size: 10px;display: flex;">
            <div style="display: flex;flex: 1;justify-content: center;align-items: center;"
                 v-for="(item,index) in flagList">
              <div style="width: 10px;height: 10px;" :style="{backgroundColor:item.color}">
              </div>
              <div v-if="type=='INS'"
                   style="margin-left: 5px;font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                {{ item.ins_title }}
              </div>
              <div v-if="type=='OAD'"
                   style="margin-left: 5px;font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                {{ item.oad_title }}
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;display: flex;justify-content: center;margin-top:20px;">
          <div style="width: 90%;display: flex;flex-wrap: wrap;justify-content: space-between;">
            <div
                :style="{backgroundImage:'url('+item.bg+')'}"
                style="background-size:101% auto;background-color:#fff;background-position:bottom left;background-repeat:no-repeat;width: 31.33%;height: 23vh;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: flex-start;border-radius: 4px;"
                v-for="item in targetList">
              <div style="height: 96%;display: flex;flex-direction: column;">
                <div
                    style="line-height: 24px;font-family: PingFangSC-Semibold;display: flex;flex: 1;display: flex;justify-content: center;align-items: center;font-weight: bold;font-size: 16px;color: #333333;">
                  {{ item.title }}
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.75vh;margin-bottom: 2px;">
                  <div style="font-size: 16px;color: #333333;color: #333;line-height: 20px;">
                    {{ item.cus_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    客户比/客户数
                  </div>
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.85vh;margin-bottom: 2px;">
                  <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #333333;line-height: 20px;">
                    {{ item.po_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    潜力比
                  </div>
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.85vh;margin-bottom: 2px;">
                  <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #333333;line-height: 20px">
                    {{ item.to_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    接触点比
                  </div>
                </div>
              </div>


            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="重点发展客户" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;" name="2">
        <div style="display: flex;justify-content: center;width: 100%;margin-top: 15px;" v-if="type=='INS'">
          <div class="condition">
            <div v-for="(item, index) in importantProductList" :key="index"
                 :class="important_condition_selected==index?'condition_check':'condition_uncheck'"
                 :style="item.select?'color: #454592;background: rgba(69, 69, 146, 0.1);':'',importantProductList.length==1?'border-radius:30px;':(index==importantProductList.length-1?('border-top-right-radius:30px;border-bottom-right-radius:30px;'):(index==0?'border-top-left-radius:30px;border-bottom-left-radius:30px;':''))"
                 style="width:50%;height:100%;"
                 @click="importantConditionChange(index)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div style="width: 100%;margin-top:20px;display: flex;justify-content: center;">
          <div style="width: 95%;font-size: 10px;display: flex;">
            <div style="display: flex;flex: 1;justify-content: center;align-items: center;"
                 v-for="(item,index) in flagList">
              <div style="width: 10px;height: 10px;" :style="{backgroundColor:item.color}">
              </div>
              <div v-if="type=='INS'"
                   style="margin-left: 5px;font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                {{ item.ins_title }}
              </div>
              <div v-if="type=='OAD'"
                   style="margin-left: 5px;font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                {{ item.oad_title }}
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;display: flex;justify-content: center;margin-top:20px;">
          <div style="width: 90%;display: flex;flex-wrap: wrap;justify-content: space-between;">
            <div
                :style="{backgroundImage:'url('+item.bg+')'}"
                style="background-size:101% auto;background-repeat:no-repeat;background-color:#fff;background-position:bottom left;border-radius: 4px;width: 31.33%;height: 23vh;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: flex-start;"
                v-for="item in importantList">
              <div style="height: 96%;display: flex;flex-direction: column;">
                <div
                    style="line-height: 24px;font-family: PingFangSC-Semibold;display: flex;flex: 1;display: flex;justify-content: center;align-items: center;font-weight: bold;font-size: 16px;color: #333333;">
                  {{ item.title }}
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.75vh;margin-bottom: 2px;">
                  <div style="font-size: 16px;color: #333333;color: #333;line-height: 20px;">
                    {{ item.cus_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    客户比/客户数
                  </div>
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.85vh;margin-bottom: 2px;">
                  <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #333333;line-height: 20px;">
                    {{ item.po_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    潜力比
                  </div>
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.85vh;margin-bottom: 2px;">
                  <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #333333;line-height: 20px">
                    {{ item.to_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    接触点比
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="完成客户" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;" name="3">
        <div style="display: flex;justify-content: center;width: 100%;margin-top: 15px;" v-if="type=='INS'">
          <div class="condition">
            <div v-for="(item, index) in finishProductList" :key="index"
                 :class="finish_condition_selected==index?'condition_check':'condition_uncheck'"
                 :style="item.select?'color: #454592;background: rgba(69, 69, 146, 0.1);':'',finishProductList.length==1?'border-radius:30px;':(index==finishProductList.length-1?('border-top-right-radius:30px;border-bottom-right-radius:30px;'):(index==0?'border-top-left-radius:30px;border-bottom-left-radius:30px;':''))"
                 style="width:50%;height:100%;"
                 @click="finishConditionChange(index)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div style="width: 100%;margin-top:20px;display: flex;justify-content: center;">
          <div style="width: 95%;font-size: 10px;display: flex;">
            <div style="display: flex;flex: 1;justify-content: center;align-items: center;"
                 v-for="(item,index) in flagList">
              <div style="width: 10px;height: 10px;" :style="{backgroundColor:item.color}">
              </div>
              <div v-if="type=='INS'"
                   style="margin-left: 5px;font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                {{ item.ins_title }}
              </div>
              <div v-if="type=='OAD'"
                   style="margin-left: 5px;font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                {{ item.oad_title }}
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;display: flex;justify-content: center;margin-top:20px;">
          <div style="width: 90%;display: flex;flex-wrap: wrap;justify-content: space-between;">
            <div
                :style="{backgroundImage:'url('+item.bg+')'}"
                style="background-size:101% auto;background-color:#fff;background-position:bottom left;background-repeat:no-repeat;border-radius: 4px;width: 31.33%;height: 23vh;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: flex-start;"
                v-for="item in finishList">
              <div style="height: 96%;display: flex;flex-direction: column;">
                <div
                    style="line-height: 24px;font-family: PingFangSC-Semibold;display: flex;flex: 1;display: flex;justify-content: center;align-items: center;font-weight: bold;font-size: 16px;color: #333333;">
                  {{ item.title }}
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.75vh;margin-bottom: 2px;">
                  <div style="font-size: 16px;color: #333333;color: #333;line-height: 20px;">
                    {{ item.cus_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    客户比/客户数
                  </div>
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.85vh;margin-bottom: 2px;">
                  <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #333333;line-height: 20px;">
                    {{ item.po_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    潜力比
                  </div>
                </div>
                <div
                    style="display: flex;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 1.85vh;margin-bottom: 2px;">
                  <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #333333;line-height: 20px">
                    {{ item.to_percent }}
                  </div>
                  <div style="font-family: PingFangSC-Regular;font-size: 12px;color: #666666;line-height: 12px;">
                    接触点比
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div id="arrow_down" v-if="arrow_down_show"
         style="display: flex;justify-content: center;align-items: center;background: rgba(255,255,255,0.90);height: 40px;position: fixed;width: 100%;bottom: 0;left: 0;">
      <img :src="arrow_down" style="width: 24px;height: 24px;" @click="scroll2Bottom"/>
    </div>
  </div>
</template>

<script>

import Combined from "@assets/icon/Combined Shape.svg";
import dayjs from "dayjs";
import {
  Tab,
  Tabs,
} from "vant";
import Vue from "vue";
import left_icon from "@assets/icon/chevron_left.svg";
import right_icon from "@assets/icon/chevron_right.svg";
import bg_blue from "@assets/image/cus_bg_blue.svg";
import bg_red from "@assets/image/cus_bg_red.svg";
import bg_green from "@assets/image/cus_bg_green.svg";
import {getToken, getSubByRole, getDictionary} from '@api/tm'
import arrow_down from "@assets/icon/arrow_down_black.svg";

Vue.use(Tabs);
Vue.use(Tab);
export default {
  name: "dashboard_customer",
  data() {
    return {
      arrow_down: arrow_down,
      arrow_down_show: true,
      bg_blue: bg_blue,
      bg_red: bg_red,
      bg_green: bg_green,
      type: "",
      left_icon: left_icon,
      right_icon: right_icon,
      email: sessionStorage.getItem('email'),
      Combined: Combined,
      day: dayjs().format("YYYY/MM/DD"),
      cal_label: dayjs().format("YYYY/MM"),
      activeName: '1',
      target_condition_selected: 0,
      important_condition_selected: 0,
      finish_condition_selected: 0,
      targetProductList: [],
      importantProductList: [],
      finishProductList: [],
      flagList: [
        {
          ins_title: '客户排名1-4',
          oad_title: '客户排名1-3',
          color: '#F6C9CB',
        },
        {
          ins_title: '客户排名5-8',
          oad_title: '客户排名4-6',
          color: '#D9F2CC'
        },
        {
          ins_title: '客户排名9-12',
          oad_title: '客户排名7-9',
          color: '#CCE7FF'
        }
      ],
      targetList: [],
      importantList: [],
      finishList: [],
      ceri_obj: {},
      ins_default: [
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
      ],
      oad_default: [
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
        {
          callNum: 0,
          callNumPercent: "0",
          personNum: 0,
          personPercent: "0",
          potentialPercent: "0",
          score: 0
        },
      ],
    }
  },
  methods: {
    scroll2Bottom() {

      window.scrollTo({
        top: document.documentElement.scrollHeight || document.body.scrollHeight,
        behavior: "smooth"
      });

    },
    changeArrowStatus() {
      this.arrow_down_show = false
    },
    chooseTagData(active) {
      switch (active) {
        case '1': {
          this.getTargetData()
          break
        }
        case '2': {
          this.getImportantData()
          break
        }
        case '3': {
          this.getFinishData()
          break
        }
      }
    },
    AddMonth() {
      this.day = dayjs(this.day).add(1, 'month').format('YYYY/MM/DD')
      this.cal_label = dayjs(this.day).format('YYYY/MM')
      if (this.type == 'INS') {
        this.getPTProduct(dayjs(this.day).format("YYYYMM"), this.ceri_obj.territoryCd)
      }
      setTimeout(() => {
        this.chooseTagData(this.activeName)
      }, 500)
    },
    MonthReduction() {
      this.day = dayjs(this.day).subtract(1, 'month').format('YYYY/MM/DD')
      this.cal_label = dayjs(this.day).format('YYYY/MM')
      if (this.type == 'INS') {
        this.getPTProduct(dayjs(this.day).format("YYYYMM"), this.ceri_obj.territoryCd)
      }
      setTimeout(() => {
        this.chooseTagData(this.activeName)
      }, 500)
    },
    async targetConditionChange(index) {
      this.target_condition_selected = index
      this.targetList = []
      this.getTargetData()
    },
    async importantConditionChange(index) {
      this.important_condition_selected = index
      this.importantList = []
      this.getImportantData()
    },
    async finishConditionChange(index) {
      this.finish_condition_selected = index
      this.finishList = []
      this.getFinishData()
    },
    process9(data) {
      let abc = ['C', 'A', 'B']
      let qdnz = ['', '未知', '知道', '知行']
      let c_list = data.map(item => item.personNum).sort((n1, n2) => {
        return n2 - n1
      })
      let d_index = 0
      let result = []
      data.forEach((item, index) => {
        d_index++
        if (item.personNum >= c_list[2]) {
          result.push({
            title: `${abc[d_index % 3]}/${qdnz[Math.ceil(d_index / 3)]}`,
            cus_percent: `${item.personPercent}%/${item.personNum}`,
            po_percent: `${item.potentialPercent}%`,
            to_percent: `${item.callNumPercent}%`,
            bg: bg_red
          })
        } else if (item.personNum < c_list[2] && item.personNum >= c_list[5]) {
          result.push({
            title: `${abc[d_index % 3]}/${qdnz[Math.ceil(d_index / 3)]}`,
            cus_percent: `${item.personPercent}%/${item.personNum}`,
            po_percent: `${item.potentialPercent}%`,
            to_percent: `${item.callNumPercent}%`,
            bg: bg_green
          })
        } else {
          result.push({
            title: `${abc[d_index % 3]}/${qdnz[Math.ceil(d_index / 3)]}`,
            cus_percent: `${item.personPercent}%/${item.personNum}`,
            po_percent: `${item.potentialPercent}%`,
            to_percent: `${item.callNumPercent}%`,
            bg: bg_blue
          })
        }
      })
      return result
    },
    process12(data) {
      let self=this.type
      let abc = ['C', 'A', 'B']
      let qdnz = ['', '前', '到', '纳', '做']
      let c_list = data.map(item => item.personNum).sort((n1, n2) => {
        return n2 - n1
      })
      let d_index = 0
      let result = []
      data.forEach((item, index) => {
        d_index++
        if (item.personNum >= c_list[3]) {
          result.push({
            title: `${abc[d_index % 3]}/${qdnz[Math.ceil(d_index / 3)]}`,
            cus_percent: `${item.personPercent}%/${item.personNum}`,
            po_percent: `${item.potentialPercent}%`,
            to_percent: `${item.callNumPercent}%`,
            bg: bg_red
          })
        } else if (item.personNum < c_list[3] && item.personNum >= c_list[7]) {
          result.push({
            title: `${abc[d_index % 3]}/${qdnz[Math.ceil(d_index / 3)]}`,
            cus_percent: `${item.personPercent}%/${item.personNum}`,
            po_percent: `${item.potentialPercent}%`,
            to_percent: `${item.callNumPercent}%`,
            bg: bg_green
          })
        } else {
          result.push({
            title: `${abc[d_index % 3]}/${qdnz[Math.ceil(d_index / 3)]}`,
            cus_percent: `${item.personPercent}%/${item.personNum}`,
            po_percent: `${item.potentialPercent}%`,
            to_percent: `${item.callNumPercent}%`,
            bg: bg_blue
          })
        }
      })
      return result;
    },
    getData(productCd, isCore, monthId) {
      let f = {
        token: this.ceri_obj.tokenString,
        productCd: productCd,
        isCore: isCore,
        monthId: monthId,
        chooseRole: this.ceri_obj.token.userType,
        checkedRole: this.ceri_obj.token.userType,
        checkedCode: this.ceri_obj.territoryCd
      }

      let result = getSubByRole(f).then(res => {
        let d = []
        if (res.errorCode === '0') {
          if (res.data.mrSegment12) {
            for (let i = 1; i < 13; i++) {
              d.push(res.data['mrSegment' + i])
            }
            return this.process12(d)
          } else {
            for (let i = 1; i < 10; i++) {
              d.push(res.data['mrSegment' + i])
            }
            return this.process9(d)
          }
        } else {
          if (this.type == 'INS') {
            return this.process12(this.ins_default)
          } else if (this.type == 'OAD') {
            return this.process9(this.oad_default)
          } else {
            alert(res.errorMsg)
            return []
          }

        }

      })
      return result;
    },
    getPTProduct(month, employeeCode) {
      let self = this
      self.targetProductList = []
      self.importantProductList = []
      self.finishProductList = []
      getDictionary({
        tokenString: this.ceri_obj.tokenString,
        monthId: month,
        // employeeCode: this.ceri_obj.territoryCd,
        employeeCode: employeeCode,
        filterType: "product"
      }).then(res => {
        if (res.errorCode === '0') {
          self.targetProductList.push({code: "", name: '全部', monthId: ''})
          self.importantProductList.push({code: "", name: '全部', monthId: ''})
          self.finishProductList.push({code: "", name: '全部', monthId: ''})
          res.product.forEach(item => {
            self.targetProductList.push(item)
            self.importantProductList.push(item)
            self.finishProductList.push(item)
          })

        } else {
          alert("获取pt产品失败！")
        }

      })
    },
    async getTargetData() {
      this.targetList = []
      this.targetList = await this.getData(this.type === 'INS' ? this.targetProductList[this.target_condition_selected].code : '', this.activeName, dayjs(this.day).format("YYYYMM"))
    },
    async getImportantData() {
      this.importantList = []
      this.importantList = await this.getData(this.type === 'INS' ? this.importantProductList[this.important_condition_selected].code : '', this.activeName, dayjs(this.day).format("YYYYMM"))
    },
    async getFinishData() {
      this.finishList = []
      this.finishList = await this.getData(this.type === 'INS' ? this.finishProductList[this.finish_condition_selected].code : '', this.activeName, dayjs(this.day).format("YYYYMM"))
    },
    async getToken() {
      await getToken({}).then(res => {
        this.ceri_obj = res
        if (res.token.pt === 'PT76') {
          this.type = 'INS'
          this.getPTProduct(dayjs(this.day).format("YYYYMM"), "POS_00258159")
        } else {
          this.type = 'OAD'
        }
      })

    },
    async init() {
      this.targetList = await this.getData("", this.activeName, dayjs(this.day).format("YYYYMM"))

      setTimeout(() => {
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        if (windowHeight == scrollHeight) {
          this.arrow_down_show = false
        }
      }, 2000)

      // console.log(this.targetList)
    },
  },
  created() {
    window.onscroll = function () {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollHeight - (scrollTop + windowHeight) < 20) {
        //写后台加载数据的函数
        let dom = document.getElementById('arrow_down')
        dom.style.display = 'none'
        console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
      } else {
        let dom = document.getElementById('arrow_down')
        dom.style.display = 'flex'
      }
    }
  },
  destroyed() {
    window.onscroll = null
  },
  mounted() {

    this.getToken()
    setTimeout(() => {
      this.init()
    }, 2000)
    let d = []
  }
  ,
  watch: {
    activeName(newval, oldval) {
      this.chooseTagData(newval)
    }
  }
}
</script>

<style src="./index.css" scoped></style>